<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 300px;
            margin: auto;
        }
    </style>
</head>

<body>
    <div id="box">
        <h3>选中今晚的陪玩</h3>
        <form action="">
            余秋欲<input type="checkbox" >
            <br>
            田浩鸣<input type="checkbox">
            <br>
            高茂布<input type="checkbox">
            <br>
            房俊麟<input type="checkbox">
            <br>
            梁超懂<input type="checkbox">
        </form>
        <div id='small'>
            <input type="button" value="全选" id="all">
            <input type="button" value="反选" id="reverse">
            <input type="button" value="全不选" id="no_all">
        </div>
        <script>
            let arr = document.querySelectorAll('[type="checkbox"]');
            small.onclick = function (event) {
                switch (event.target.id) {
                    case 'all': //全选
                        for (let item of arr) {
                            item.checked = true;
                        }
                        break;
                    case 'reverse': //反选
                        for (let item of arr) {
                            item.checked = !item.checked
                        }
                        break;
                    case 'no_all': //全不选
                        for (let item of arr) {
                            item.checked = false;
                        }
                        break;
                }
            }
        </script>
    </div>
</body>

</html>